@default_blue:#30a5ff;
.main-wrap{
    position:relative;
    height:100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    .tabs{
        position:absolute;
        bottom:0rem;
        width:100%;
        background-color:#fff;
        ul{
            width:100%;
            text-align: center;
            border-top: 1px solid #ccc;
            padding:0.125rem 0rem;
            li{
                float:left;
                width:33.3%;
                font-size:0.3125rem;
                p{
                    font-size:0.8rem;
                }
            }
            .active{
                color:@default_blue;
            }
        }
    }
}
/* me */
.me-header{
    padding-top: 0.8rem;
    height:4rem;
    border-bottom:1px solid #ccc;
    box-shadow:0px 2px 2px #ccc;
    background-color:#fff;
    margin-bottom:0.3125rem;
    .header-img{
        margin-left: 4.5rem;
        height:1.2rem;
        width:1.2rem;
        border-radius:50%;
        background: url("../Images/headerimg.jpg") center center no-repeat;
        background-size:1.2rem;
    }
    h3{
        position:relative;
        margin:0.25rem 0rem;
        color:#444;
        font-size:1rem;
        text-align: center;
    }
}
.me-info{
    padding-bottom:2rem;
}
/* infoList */
.infoList li{
    padding: 0.5rem;
    background-color: #fff;
    border-bottom:1px solid #f5f5f5;
    color:#888;
    span:nth-child(2){
        color:#444;
        float:right;
    }
    span{
        &>div{
            margin-top:0.5rem;
            width:100%;
            &>div{
                display:inline-block;
                width:2.1rem;
                height:2.1rem;
                margin-right:0.2rem;
                border:1px solid #ccc;
                box-sizing: border-box;
                &>div{
                    width:2.1rem;
                    height:2.1rem;
                    text-align: center;
                    display:table-cell;
                    vertical-align: middle;
                }
                img{
                    vertical-align: middle;
                    width:100%;
                    height:auto;
                }
            } 
            &>div:nth-child(4n){
                margin-right:0rem;
            }
        }
    }
}
/* kefu */
.img-kefu{
    margin-top:4rem;
    height:4rem;
    background:url("../Images/kefu.png") center center no-repeat;
    background-size: 4rem;
    margin-bottom:0.5rem;
}
.kefu-p{
    text-align: center;
    padding:0.25rem 1rem;
    color:#888;
    a{
        font-size:0.625rem;
        color:@default_blue;
    }
}
/* order */
.order-list li{
    position:relative;
    background-color:#fff;
    border-bottom:1px solid #e5e5e5;
    div{
        float:left;
    }
    a{
        display: block;
        padding:0.3125rem;
        overflow:hidden;
    }
    div:nth-child(1){
        width:2rem;
        text-align: center;
        margin-top:0.25rem;
        &>span{
            font-size:1rem;
        }
    }
    div:nth-child(2){
        width:7rem;
        p{
            padding:0rem 0.3125rem;
        }
        p:nth-child(1){
            margin-bottom:0.25rem;
        }
        p:nth-child(2){
            color:#888;
        }
    }
}
.right-arrow{
    position:absolute;
    color:#888;
    right:0.3125rem;
    top:0.8rem;
}
.order-search{
    padding:0.125rem;
    input{
        display: block;
        box-sizing: border-box;
        padding:0.125rem 0.5rem;
        width:100%;
        border:0px;
        border-radius:0.125rem;
        font-size:0.4375rem;
    }
}
.order-title{
    overflow:hidden;
    background-color:#fff;
    border-bottom:1px solid #ccc;
    li{
        width:33.3%;
        float:left;
        padding:0.3125rem 0rem;
        text-align: center;
    }
    .active{
        color:@default_blue;
    }
}
/* detail */
.detail-title{
    text-align: center;
    background-color: #fff;
    padding:1rem 0.5rem;
    border-bottom:1px solid #ccc;
    h3{
        font-size:0.875rem;
    }
    p{
        font-size:0.5rem;
        color:#888;
    }
}
.detail-list{
    padding:0px 0.5rem;
    overflow: hidden;
    background-color:#fff;
    margin-bottom:0.3125rem;
    box-shadow: 0px 2px 2px #e5e5e5;
    li{
        float:left;
        width:2.1rem;
        margin-right:0.2rem;
        text-align:center;
        a{
            display: block;
            padding:0.3125rem 0rem;
            font-size:0.4325rem;
            color:@default_blue;
            p{
                font-size:0.8rem;
                margin-bottom:0.25rem;
            }
        }
    }
    li:last-child{
        margin-right: 0rem;
    }
}
/* info */
.info-title{
    text-align: center;
    font-size: 0.5625rem;
    padding:0.25rem 0.625rem;
}